<!DOCTYPE HTML>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="ydong博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://ydongabc.gitee.io/blog">
    <!--SEO-->

<meta name="keywords" content="h5活动页,fullPage.js">


<meta name="description" content="1.fullpage 全屏插件全屏滚动效果，原生js也很好实现，主要是用 mousewheel  鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效...">


<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->

<title>
    
    H5全屏滚动活动页插件 |
    
    ydong博客
</title>

<link rel="alternate" href="/atom.xml" title="ydong博客" type="application/atom+xml">


<link rel="icon" href="./favicon.ico">

    

<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">
    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

</head></html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /blog/./img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://ydongabc.gitee.io/blog">
                        ydong博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="H5全屏滚动活动页插件">
            
            H5全屏滚动活动页插件
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/blog/categories/前端/">前端</a> <a class="category-link" href="/blog/categories/前端/javascript/">javascript</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/blog/tags/fullPage-js/">fullPage.js</a> <a class="tag-link" href="/blog/tags/h5活动页/">h5活动页</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2019/11/07</span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <h2 id="1-fullpage-全屏插件"><a href="#1-fullpage-全屏插件" class="headerlink" title="1.fullpage 全屏插件"></a>1.fullpage 全屏插件</h2><p>全屏滚动效果，原生js也很好实现，主要是用 mousewheel  鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理，比较麻烦。</p>
<p>fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。</p>
<p>github 官网     <a href="https://github.com/alvarotrigo/fullPage.js" target="_blank" rel="noopener">https://github.com/alvarotrigo/fullPage.js</a>  </p>
<p>中文演示地址   <a href="http://www.dowebok.com/demo/2014/77/" target="_blank" rel="noopener">http://www.dowebok.com/demo/2014/77/</a>    </p>
<p>主要功能有：</p>
<p>支持鼠标滚动</p>
<p>支持前进后退和键盘控制</p>
<p>多个回调函数</p>
<p>支持手机、平板触摸事件</p>
<p>支持 CSS3 动画</p>
<p>支持窗口缩放</p>
<p>窗口缩放时自动调整</p>
<p>可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等</p>
<h3 id="引用文件"><a href="#引用文件" class="headerlink" title="引用文件"></a>引用文件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/jquery.fullPage.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"> <span class="comment">&lt;!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.easings.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.fullPage.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="HTML-结构"><a href="#HTML-结构" class="headerlink" title="HTML 结构"></a>HTML 结构</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"fullpage"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>第一屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>第二屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slide"</span>&gt;</span>第三屏的第一屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slide"</span>&gt;</span>第三屏的第二屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slide"</span>&gt;</span>第三屏的第三屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"slide"</span>&gt;</span>第三屏的第四屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>第四屏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="JavaScript入口函数"><a href="#JavaScript入口函数" class="headerlink" title="JavaScript入口函数"></a>JavaScript入口函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">'#fullpage'</span>).fullpage();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="fullpage-详细参数"><a href="#fullpage-详细参数" class="headerlink" title="fullpage 详细参数"></a>fullpage 详细参数</h3><table>
<thead>
<tr>
<th>选项</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>verticalCentered</td>
<td>字符串</td>
<td>true</td>
<td>内容是否垂直居中</td>
</tr>
<tr>
<td>resize</td>
<td>布尔值</td>
<td>false</td>
<td>字体是否随着窗口缩放而缩放</td>
</tr>
<tr>
<td>sectionColor</td>
<td>函数</td>
<td>无</td>
<td>设置背景颜色</td>
</tr>
<tr>
<td>anchors</td>
<td>数组</td>
<td>无</td>
<td>定义锚链接</td>
</tr>
<tr>
<td>scrollingSpeed</td>
<td>整数</td>
<td>700</td>
<td>滚动速度，单位为毫秒</td>
</tr>
<tr>
<td>easing</td>
<td>字符串</td>
<td>easeInQuart</td>
<td>滚动动画方式</td>
</tr>
<tr>
<td>menu</td>
<td>布尔值</td>
<td>false</td>
<td>绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动</td>
</tr>
<tr>
<td>navigation</td>
<td>布尔值</td>
<td>false</td>
<td>是否显示项目导航</td>
</tr>
<tr>
<td>navigationPosition</td>
<td>字符串</td>
<td>right</td>
<td>项目导航的位置，可选 left 或 right</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>navigationTooltips</td>
<td>数组</td>
<td>空</td>
<td>项目导航的 tip</td>
</tr>
<tr>
<td>slidesNavigation</td>
<td>布尔值</td>
<td>false</td>
<td>是否显示左右滑块的项目导航</td>
</tr>
<tr>
<td>slidesNavPosition</td>
<td>字符串</td>
<td>bottom</td>
<td>左右滑块的项目导航的位置，可选 top 或 bottom</td>
</tr>
<tr>
<td>controlArrowColor</td>
<td>字符串</td>
<td>#fff</td>
<td>左右滑块的箭头的背景颜色</td>
</tr>
<tr>
<td>loopBottom</td>
<td>布尔值</td>
<td>false</td>
<td>滚动到最底部后是否滚回顶部</td>
</tr>
<tr>
<td>loopTop</td>
<td>布尔值</td>
<td>false</td>
<td>滚动到最顶部后是否滚底部</td>
</tr>
<tr>
<td>loopHorizontal</td>
<td>布尔值</td>
<td>true</td>
<td>左右滑块是否循环滑动</td>
</tr>
<tr>
<td>autoScrolling</td>
<td>布尔值</td>
<td>true</td>
<td>是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条</td>
</tr>
<tr>
<td>scrollOverflow</td>
<td>布尔值</td>
<td>false</td>
<td>内容超过满屏后是否显示滚动条</td>
</tr>
<tr>
<td>css3</td>
<td>布尔值</td>
<td>false</td>
<td>是否使用 CSS3 transforms 滚动</td>
</tr>
<tr>
<td>paddingTop</td>
<td>字符串</td>
<td>0</td>
<td>与顶部的距离</td>
</tr>
<tr>
<td>paddingBottom</td>
<td>字符串</td>
<td>0</td>
<td>与底部距离</td>
</tr>
<tr>
<td>fixedElements</td>
<td>字符串</td>
<td>无</td>
<td></td>
</tr>
<tr>
<td>normalScrollElements</td>
<td></td>
<td>无</td>
<td></td>
</tr>
<tr>
<td>keyboardScrolling</td>
<td>布尔值</td>
<td>true</td>
<td>是否使用键盘方向键导航</td>
</tr>
<tr>
<td>touchSensitivity</td>
<td>整数</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>continuousVertical</td>
<td>布尔值</td>
<td>false</td>
<td>是否循环滚动，与 loopTop 及 loopBottom 不兼容</td>
</tr>
<tr>
<td>animateAnchor</td>
<td>布尔值</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>normalScrollElementTouchThreshold</td>
<td>整数</td>
<td>5</td>
<td></td>
</tr>
</tbody></table>
<h3 id="fullPage-js-方法"><a href="#fullPage-js-方法" class="headerlink" title="fullPage.js 方法"></a>fullPage.js 方法</h3><p>注意方法的使用时需要添加：</p>
<p>$.fn.fullpage   比如</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.fn.fullpage.moveTo(<span class="number">1</span>);</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>moveSectionUp()</td>
<td>向上滚动</td>
</tr>
<tr>
<td>moveSectionDown()</td>
<td>向下滚动</td>
</tr>
<tr>
<td>moveTo(section, slide)</td>
<td>滚动到</td>
</tr>
<tr>
<td>moveSlideRight()</td>
<td>slide 向右滚动</td>
</tr>
<tr>
<td>moveSlideLeft()</td>
<td>slide 向左滚动</td>
</tr>
<tr>
<td>setAutoScrolling()</td>
<td>设置页面滚动方式，设置为 true 时自动滚动</td>
</tr>
<tr>
<td>setAllowScrolling()</td>
<td>添加或删除鼠标滚轮/触控板控制</td>
</tr>
<tr>
<td>setKeyboardScrolling()</td>
<td>添加或删除键盘方向键控制</td>
</tr>
<tr>
<td>setScrollingSpeed()</td>
<td>定义以毫秒为单位的滚动速度</td>
</tr>
</tbody></table>
<h3 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h3><table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>afterLoad</td>
<td>滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算</td>
</tr>
<tr>
<td>onLeave</td>
<td>滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。</td>
</tr>
<tr>
<td>afterRender</td>
<td>页面结构生成后的回调函数，或者说页面初始化完成后的回调函数</td>
</tr>
<tr>
<td>afterSlideLoad</td>
<td>滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数</td>
</tr>
<tr>
<td>onSlideLeave</td>
<td>某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数</td>
</tr>
</tbody></table>
<h2 id="2-jQuery-Easing-js-插件"><a href="#2-jQuery-Easing-js-插件" class="headerlink" title="2.jQuery Easing.js 插件"></a>2.jQuery Easing.js 插件</h2><p>介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。</p>
<p>环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它</p>
<p>如果只想要简单的写法就用 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">".car"</span>).animate(&#123;<span class="string">"left"</span>: <span class="string">"150%"</span>&#125;,  <span class="number">4000</span>, <span class="string">"easeInElastic"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">easing:格式为json,&#123;<span class="attr">duration</span>:持续时间,<span class="attr">easing</span>:过渡效果,<span class="attr">complete</span>:成功后的回调函数&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(element).animate(&#123; </span><br><span class="line">    height:<span class="number">500</span>, </span><br><span class="line">    width:<span class="number">600</span> </span><br><span class="line">    &#125;,&#123; </span><br><span class="line">    easing: <span class="string">'easeInOutQuad'</span>, </span><br><span class="line">    duration: <span class="number">500</span>, </span><br><span class="line">    complete: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125; </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ol>
<li>linear</li>
<li>swing</li>
<li>easeInQuad</li>
<li>easeOutQuad</li>
<li>easeInOutQuad</li>
<li>easeInCubic</li>
<li>easeOutCubic</li>
<li>easeInOutCubic</li>
<li>easeInQuart<ol start="10">
<li>easeOutQuart</li>
<li>easeInOutQuart</li>
<li>easeInQuint</li>
<li>easeOutQuint</li>
<li>easeInOutQuint</li>
<li>easeInExpo</li>
<li>easeOutExpo</li>
<li>easeInOutExpo</li>
<li>easeInSine</li>
<li>easeOutSine</li>
<li>easeInOutSine</li>
<li>easeInCirc</li>
<li>easeOutCirc</li>
<li>easeInOutCirc</li>
<li>easeInElastic</li>
<li>easeOutElastic</li>
<li>easeInOutElastic</li>
<li>easeInBack</li>
<li>easeOutBack</li>
<li>easeInOutBack</li>
<li>easeInBounce</li>
<li>easeOutBounce</li>
<li>easeInOutBounce</li>
</ol>
</li>
</ol>
<p>demo演示地址：<br><a href="https://matthewlein.com/experiments/easing.html" target="_blank" rel="noopener">https://matthewlein.com/experiments/easing.html</a></p>
<h2 id="3-360度3D-旋转插件：circlr-js"><a href="#3-360度3D-旋转插件：circlr-js" class="headerlink" title="3.360度3D 旋转插件：circlr.js"></a>3.360度3D 旋转插件：circlr.js</h2><p>使用方法：</p>
<ol>
<li><p>引用js文件包</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/jquery.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/circlr.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>2.书写结构：</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"circlr"</span>&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"picture/1.png"</span> /&gt;</span></span><br><span class="line">             <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"picture/2.png"</span> /&gt;</span> </span><br><span class="line">             <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"picture/3.png"</span> /&gt;</span>  </span><br><span class="line">             ...</span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"loader"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注意， 是 自定义属性  data-src 里面写路径    2.  loader 是 加载项  </p>
<ol start="3">
<li><p>书写css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#circlr</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: move;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#circlr</span> <span class="selector-id">#loader</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(../images/loader.gif) center center no-repeat;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​</p>
</li>
</ol>
<p>4.调用文件对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">	<span class="keyword">var</span> crl = circlr(<span class="string">'circlr'</span>, &#123;</span><br><span class="line">	  scroll : <span class="literal">true</span>,</span><br><span class="line">	  loader : <span class="string">'loader'</span></span><br><span class="line">	&#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="4-视差滚动插件：stellar-js"><a href="#4-视差滚动插件：stellar-js" class="headerlink" title="4.视差滚动插件：stellar.js"></a>4.视差滚动插件：stellar.js</h2><p>视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术</p>
<p>主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充。</p>
<p>特性：</p>
<p>视差滚动效果酷炫，适合于个性展示的场合。</p>
<p>视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。</p>
<p>视差滚动容易迷航，需要具备较强的导航功能。</p>
<p>原理：</p>
<p>传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。</p>
<p>有的时候也可以加上一些透明度、大小的动画来优化显示。 </p>
<p>利用background-attachment属性实现。</p>
<p><strong>background-attachment: fixed || scroll || local</strong></p>
<p>视差滚动插件[stellar.js]是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用它。 这个插件在jQuery插件库里很流行。</p>
<p>官网：<a href="http://markdalgleish.com/projects/stellar.js/" target="_blank" rel="noopener">http://markdalgleish.com/projects/stellar.js/</a>   </p>
<p>1.引用 js包 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"path/to/jquery/jquery.min.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&lt;script src=<span class="string">"path/to/jquery.stellar.min.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>2.引用html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content1"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content2"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content3"</span> <span class="attr">data-stellar-background-ratio</span>=<span class="string">"0.5"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content4"</span> <span class="attr">data-stellar-background-ratio</span>=<span class="string">"0.5"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content5"</span> <span class="attr">data-stellar-background-ratio</span>=<span class="string">"0.5"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span> <span class="attr">id</span>=<span class="string">"content6"</span> <span class="attr">data-stellar-background-ratio</span>=<span class="string">"0.5"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TEXT HERE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>3.引入CSS</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span> black, <span class="number">0</span> <span class="number">0</span> <span class="number">5px</span> black;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">0.5em</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.content</span> &#123;</span><br><span class="line">    <span class="attribute">background-attachment</span>: fixed;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content1</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"xxx.jpg"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content2</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"xxx.jpg"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content3</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"xxx.jpg"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content4</span> &#123;</span><br><span class="line">   <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"xxx.jpg"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content5</span> &#123;</span><br><span class="line">   background-image: url("xxx.jpg");");</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content6</span> &#123;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">"xxx.jpg"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>4.js调用函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$.stellar(&#123;</span><br><span class="line">    horizontalScrolling: <span class="literal">false</span>,</span><br><span class="line">    responsive: <span class="literal">true</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>详细参数</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>horizontalScrolling 和 verticalScrolling</td>
<td>该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true</td>
</tr>
<tr>
<td>responsive</td>
<td>该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false</td>
</tr>
<tr>
<td>hideDistantElements</td>
<td>该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false`</td>
</tr>
<tr>
<td>data-stellar-ratio=”2”</td>
<td>定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。</td>
</tr>
<tr>
<td>data-stellar-background-ratio</td>
<td>该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置</td>
</tr>
</tbody></table>
<h2 id="5-兼容处理"><a href="#5-兼容处理" class="headerlink" title="5.兼容处理"></a>5.兼容处理</h2><ol>
<li><p>在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了。</p>
</li>
<li><p>处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用）</p>
<script src="../js/html5shiv.min.js"></script>



</li>
</ol>
<p> 我们解决的问题， 主要是针对于ie低版本的，也就是只有低版本ie才执行才对。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if lt IE 9]&gt;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">　　 &lt;script src="js/respond.js"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="comment">     </span></span><br><span class="line"><span class="comment"> 　　&lt;script src="js/html5shiv.min.js"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">&lt;![endif]—&gt;</span></span><br></pre></td></tr></table></figure>

<p>respond.js  目的是为了解决 ie低版本的CSS3媒体查询  media query</p>
<p>条件注释 了解</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if !IE]&gt;&lt;!--&gt;</span> 除IE外都可识别 <span class="comment">&lt;!--&lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE]&gt; 所有的IE可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE 6]&gt; 仅IE6可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if lte IE 6]&gt; IE6以及IE6以下版本可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if gte IE 6]&gt; IE6以及IE6以上版本可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE 7]&gt; 仅IE7可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if lt IE 7]&gt; IE7以下版本可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if gt IE 7]&gt; IE7以上版本可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE 8]&gt; 仅IE8可识别 &lt;![endif]--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE 9]&gt; 仅IE9可识别 &lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>


    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/blog/2019/11/24/使用Promise实现异步执行并解决回调地狱/" class="pre-post btn btn-default" title='使用Promise实现异步执行并解决回调地狱'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            使用Promise实现异步执行并解决回调地狱</span>
    </a>
    
    
    <a href="/blog/2019/11/06/vue按需条件动态显示隐藏表单/" class="next-post btn btn-default" title='vue按需条件动态显示隐藏表单'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            vue按需条件动态显示隐藏表单</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-fullpage-全屏插件"><span class="toc-text">1.fullpage 全屏插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#引用文件"><span class="toc-text">引用文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML-结构"><span class="toc-text">HTML 结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript入口函数"><span class="toc-text">JavaScript入口函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fullpage-详细参数"><span class="toc-text">fullpage 详细参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fullPage-js-方法"><span class="toc-text">fullPage.js 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#回调函数"><span class="toc-text">回调函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-jQuery-Easing-js-插件"><span class="toc-text">2.jQuery Easing.js 插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-360度3D-旋转插件：circlr-js"><span class="toc-text">3.360度3D 旋转插件：circlr.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-视差滚动插件：stellar-js"><span class="toc-text">4.视差滚动插件：stellar.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-兼容处理"><span class="toc-text">5.兼容处理</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/blog/js/app.js?rev=@@hash"></script>
</body>
</html>